import React, { useState, useRef, useEffect } from "react";
import * as echarts from "echarts";
import axios from "axios";
export default () => {
  const ref = useRef();
  const init = () => {
    axios.get("https://gw.alipayobjects.com/os/bmw-prod/d4652bc5-e971-4bca-a48c-5d8ad10b3d91.json").then((res) => {
      console.log("data", res.data);
      echarts.registerMap("china", res.data);//注册地图
      const chart = echarts.init(ref.current); //图表实例
      const option = {
        title: {
          text: "z中国地图",
        },
        geo: {
          map: "china",
          zlevel: 10,
          show: true,
          layoutCenter: ["50%", "50%"],
          roam: false,
          layoutSize: "90%",
          zoom: 1,
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: "#43D0D6",
              },
            },
          },
          itemStyle: {
            normal: {
              color: "#062031",
              borderWidth: 1.1,
              borderColor: "#43D0D6",
            },
          },
          emphasis: {
            areaColor: "#FFB800",
            label: {
              show: false,
            },
          },
        },
      };
      chart.setOption(option);
    });
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}></div>
  );
};
